{% extends 'demo_base.html' %}

{% block title %}MySQL 学生信息管理系统演示{% endblock %}

{% block nav %}
    <a href="/mysql_demo/">首页</a>
    <br>
    <a href="/mysql_demo/basic_introduction/">介绍</a>
    <br>
    <a class="selected" href="/mysql_demo/table_demo/">演示</a>
{% endblock %}

{% block content %}

    <h3>MySQL 学生信息管理系统演示</h3>

    <p class="demo_para">请在以下输入框输入学生信息：</p>
    <form action="student_demo_forms/" method="post">
        {% csrf_token %}
        <div class="input-group" id="input">
            <p><label for="stu_id">学号：</label>><input type="text" id="stu_id" placeholder="ID" name="stu_id"></p>
            <p><label for="name">姓名：</label>><input type="text" id="name" placeholder="Name" name="name"></p>
            <p><label for="gender">性别：</label>><input type="text" id="gender" placeholder="Gender" name="gender"></p>
            <p><label for="major">专业：</label>><input type="text" id="major" placeholder="Major" name="major"></p>
        </div>
        <div>
            <button type="submit" class="btn btn-default">导入</button>
        </div>
    </form>
    <br>
    <table class="table table-bordered" id="table">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>专业</th>
            </tr>
        </thead>
        <tbody>
        {% for student in students %}
            <tr>
                <td>{{ student.stu_id }}</td>
                <td>{{ student.name }}</td>
                <td>{{ student.gender }}</td>
                <td>{{ student.major }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    
    <a href="/mysql_demo/table_demo/">&lt;&lt; 上一篇：MySQL 表格演示</a>

{% endblock %}